// 获取页面上的元素 通过DOM对象获取 Document --> window.document
// 通过class获取
let box = document.getElementsByClassName('box')[0]
console.log(box);
// 标签里面的内容
let text = box.innerText
console.log(text);
// box.innerText = "新写的值"
let html = box.innerHTML
console.log(html);
// innerText 值是什么原封不动到页面
// box.innerText = "<a href='#'>新写的值</a>"
// innerHTML 会解析html标签
box.innerHTML += "<a href='#'>新写的值</a>"
// 如果要拼接的时候解析html标签怎么办
box.append("<a href='#'>我是append的内容</a>")
// 通过id获取
let div = document.getElementById('box')
console.log(div);
// 通过标签名获取
let d = document.getElementsByTagName('div')[0]
console.log(d);
// 通过选择器获取
document.querySelector("#box")
let divs = document.querySelectorAll("div")
for (let i = 0; i < divs.length; i++) {
    console.log(divs[i]);
}

// 元素.属性名 获取属性值 等号可以进行赋值
// 元素.getAttribute('属性名')
let img = document.getElementById("light")
console.log(img.src);
console.log(img.alt);
let alt = img.getAttribute('alt')
console.log(alt);
// 元素.style.属性 = 属性值
let style = img.style
// console.log(style);
// 如果css中属性名是一个单词，原封不动
style.height = 200 + "px"
// style.border = "1px solid black";
// 元素.style['css样式名'] = value
style['border'] = "1px solid black";
// 多个单词css中使用-连接，在js中使用驼峰命名的形式
style.borderRadius = "50%";
let s = "border:1px solid black;border-radius:50%;"
// 行内样式 覆盖掉之前的内容
// img.style = s
// img.alt = "这里本应该有一张图片"
// img.src = "../day01/images/off.png"
// let img2 = document.querySelector("#light")